<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue的js文件-->
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <!-- v-for="赋值的变量 in 遍历的变量"   循环遍历指令-->
        <li v-for="name in arr">{{name}}</li>
    </ul>

    <hr>

    <p v-for="p in persons">姓名：{{p.name}},年龄：{{p.age}},类型：{{p.type}}</p>

    <hr>

    <table border="1">
        <caption>英雄人物介绍</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>类型</th>
        </tr>
        <tr v-for="p in persons">
            <td>{{p.name}}</td>
            <td>{{p.age}}</td>
            <td>{{p.type}}</td>
        </tr>
    </table>

</div>

<script>
    let v = new Vue({
        el:"#app",
        data:{
            arr:["刘备","关羽","张飞","赵云","马超","黄忠"],
            persons:[
                {name:"曹操",age:50,type:"战士"},
                {name:"孙尚香",age:20,type:"射手"},
                {name:"刘婵",age:15,type:"坦克"}
            ]
        }
    })
</script>

</body>
</html>